<!-- @format -->
<template>
  <div>
    <!-- 1. 三元绑定法 -->
    <!-- <p :class="isActive ? 'active' : ''">姬霓太美</p> -->

    <!-- 2. 对象绑定法 -->
    <!-- <p :class="{ active: isActive }">鸡你太美</p> -->

    <!-- 3. 共存的问题 -->
    <p
      class="title"
      :class="{ active: isActive }">
      鸡哥
    </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isActive: true
      }
    }
  }
</script>

<style>
  .active {
    color: red;
  }
</style>
